Alternative box-shadow for dark theme. #8475
Conversation
|
Note: a staging should have this online soon (alongside with a restore from backup). /cc @parlough |
|
Could you also add a screenshot showing the alternative (dark mode without shadows) for comparison? |
|
One possibility: only border: 
Another, using box-shadow to draw solid border: 
|
|
I like both. By the way, did you read the material dark-mode guide on this? |
|
Oh - realized that was android specific. |
|
I think the remaining part from the guide may be the different surface color, but I didn't want to go there yet, only to remove the not-that-nice current implementation of the shadow. My preference would be the contrast that the PR gives, but I also like the simple box-shadow marking the border (as in the "cron" example above). I think the border-only alternative is too flat, I'd rather use any of the other versions. |
| @@ -108,14 +108,14 @@ | |||
| .mini-list-item { | |||
| background: var(--pub-neutral-bgColor); | |||
| border-radius: 4px; | |||
| box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color); | |||
| box-shadow: var(--pub-box-shadow); | |||
There was a problem hiding this comment.
Should use something other than shadow at all? just curious.
There was a problem hiding this comment.
See the linked articles: the basic suggestion is to use border + lighter background for elevating count out of its surroundings. I still find those mostly flat, and I thought the inset + minimal shadow contrast may be interesting to check out. If that is not winning here, we shall do border + lighter background (though the inset is kind of that, with slight gradient changes).
|
Closing in favor of #8489. |
I've been looking into the recommendations for shadows in dark mode, and the most prominent one is just to remove them like in this article. However, another article suggested a different solution, and after a bit of experimentation, I think I like that we can have the same style for both modes.
Note: while the dark background is not really visible in dark mode, the additional opaque black shadow does create a slight contrast with the opaque white inset. To me it does feel like it has some kind of natural depth.
I am a bit undecided upon the "up" or "down" effect: in this article the "elevation" of an element is connected with the darkness and narrowness of the shadow. So if we want to keep being consistent, we want to have smaller shadow on hover (as well as darker, but that's already done). However, the current pub.dev implementation increases the shadow on hover, so I've kept it for now, but maybe we should rather go with the different direction?